<template>
  <el-dialog :title="titleText" :visible.sync="showDialog" width="90%" top="0" :close-on-click-modal="false" @close="cancel">
    <div v-loading="loading" class="preview-wrapper">
      <el-carousel height="50vh" :autoplay="false">
        <el-carousel-item v-for="(item, index) in list" :key="index">

          <iframe
            v-if="item.name.includes('.pdf') || item.name.includes('.txt')"
            id="iframe"
            class="iframe"
            :src="item.url"
            frameborder="0"
            width="100%"
            height="100%"
          ></iframe>
          <img v-else :src="item.url" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button class="cancelbtn" @click="cancel">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import axios from 'axios';
export default {
  name: 'ImgPreviewDialog',
  components: {},
  props: {
    value: Boolean,
    titleText: {
      type: String,
      default: '图片预览'
    },
    loading: {
      type: Boolean,
      default: false
    },
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      showDialog: false
    };
  },

  watch: {
    value(v) {
      this.showDialog = v;
      if (!v) {
        this.reset();
      }
    }
  },
  created() {
    this.showDialog = this.value;
  },
  mounted() {},
  methods: {
    close() {
      this.$emit('input', false);
    },
    cancel() {
      this.$emit('input', false);
    },
    reset() {
      this.loading = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.preview-wrapper {
  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
</style>
